<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="日期" prop="itemType">
        <el-date-picker
            v-model="queryParams.time"
            type="daterange"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
            size="small"
        />
      </el-form-item>

      <el-form-item label="型号" prop="itemModel">
        <el-input
            v-model="queryParams.itemModel"
            placeholder="请输入型号"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="名称" prop="itemName">
        <el-input
            v-model="queryParams.itemName"
            placeholder="请输入名称"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="产品类型" prop="itemType">
        <el-tree-select
            v-model="queryParams.itemType"
            :data="typeOptions"
            :props="{ value: 'itemTypeId', label: 'typeName', children: 'children' }"
            value-key="itemTypeId"
            placeholder="请选择产品类型"
            check-strictly
            clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="itemList" height="550" scrollbar-always-on
              @selection-change="handleSelectionChange">
      <el-table-column type="index" width="50" />
      <el-table-column label="产品图片" align="center" prop="imgUrl" width="100">
        <template #default="scope">
          <el-image
              style="width: 50px; height: 50px"
              :src="scope.row.img_url"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="[scope.row.img_url]"
              :initial-index="4"
              fit="cover"
              preview-teleported
          />
        </template>
      </el-table-column>
      <el-table-column label="型号" align="center" prop="item_model"/>
      <el-table-column label="销量" align="center" prop="count"/>
      <el-table-column label="销售额" align="center" prop="sumPrice"/>
      <el-table-column label="名称" align="center" prop="item_name"/>
      <el-table-column label="尺寸" align="center" prop="specification"/>
      <el-table-column label="颜色" align="center" prop="color" show-overflow-tooltip/>
      <el-table-column label="材质" align="center" prop="texture" show-overflow-tooltip/>
      <el-table-column label="单位" align="center" prop="unit"/>
      <el-table-column label="区域" align="center" prop="area"/>
      <el-table-column label="供应商" align="center" prop="supplier"/>
    </el-table>

  </div>
</template>

<script setup name="saleByItem">
import {saleByItem} from "@/api/system/report";
import {listType} from "@/api/system/itemType.js";


const {proxy} = getCurrentInstance();

const itemList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    itemModel: null,
    itemName: null,
    supplier: null,
    specification: null,
    color: null,
    area: null,
    itemType: null,
    unit: null,
    imgUrl: null,
    retailPrice: null,
    params: {},
    time: [],
    startTime: null,
    endTime: null,
  },
});

const {queryParams, form, rules} = toRefs(data);
const typeOptions = ref(undefined);

//添加日期的默认值
queryParams.value.time = [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 30), new Date()]

/** 查询产品类型下拉树结构 */
function getTreeselect() {
  listType().then(response => {
    typeOptions.value = [];
    typeOptions.value = proxy.handleTree(response.data, "itemTypeId", "parentId");
  });
}

/** 查询产品信息列表 */
function getList() {
  loading.value = true;
  queryParams.value.startTime = proxy.parseTime(queryParams.value.time[0], "{y}-{m}-{d}")
  queryParams.value.endTime = proxy.parseTime(queryParams.value.time[1], "{y}-{m}-{d}")
  saleByItem(queryParams.value).then(response => {
    itemList.value = response.data;
    total.value = response.data.length;
    loading.value = false;
  });
}


const shortcuts = [
  {
    text: '前一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '前一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '前三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  queryParams.value.params = {}
  handleQuery();
}

getList();
getTreeselect();
</script>
